<template>
  <h2>监视属性watch</h2>
  <p>
    第一个属性是不同形式的数据源，ref、响应式对象、getter函数、多个数据源组成的数组
  </p>
  <p>不能直接监视对象的某一个属性，监视对象的某个属性需要用到getter函数</p>
  <div>{{ c }}</div>
  <button @click="a++">a+1</button><button @click="b = b + 2">b+2</button>
  <div v-for="item in list" :key="item.id">
    {{ item.name }}-------<button @click="changeName(item)">按钮</button>
  </div>
</template>
<script setup>
import { watch, ref, getCurrentInstance } from "vue";

let a = ref(0);
let b = ref(1);
let c = ref(0);
watch(
  [a, b],
  () => {
    c.value = a.value + b.value;
  },
  {
    once: true, // once,多个数据源的时候，也是只执行一次
  }
);

// getCurrentInstance
const instance = getCurrentInstance();
console.log("getCurrentInstance", instance);

let list = ref([
  {
    id: 1,
    name: "1",
  },
  {
    id: 2,
    name: "2",
  },
  {
    id: 3,
    name: "3",
  },
]);

const changeName = (item) => {
  list.value.forEach((ele) => {
    if (ele.id === item.id) {
      ele.name += "!";
    }
  });
};
</script>
<style lang="scss" scoped></style>
